<template>
  <div class="details-container">
    <h2>新闻详情</h2>
    <div class="detail-item">
      <strong>ID:</strong> 
      <!-- <span>{{ query.id }}</span> -->
      <!-- <span>{{ params.id }}</span> -->
       <span>{{id }}</span>
    </div>
    <div class="detail-item">
      <strong>标题:</strong> 
      <!-- <span>{{ route.query.title }}</span> -->
      <!-- <span>{{ route.params.title }}</span>-->
       <span>{{title }}</span>
    </div>
    <div class="detail-item">
      <strong>内容:</strong> 
      <!-- <span>{{ route.query.content }}</span> -->
      <!-- <span>{{ route.params.content }}</span> -->
       <span>{{content }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { toRefs } from 'vue'
import { defineProps } from 'vue'

// 使用 useRoute 获取当前路由信息
const route = useRoute()
// 获取路由参数方法一解构写法：query和params参数
// let {query} = toRefs(route)//获取query参数 将query对象解构出来（保持响应式）
// let {params} = toRefs(route)//获取params参数
//方法二：defineProps,在路由文件的index.ts中定义props传参
defineProps(['id','title','content'])

</script>

<style scoped>
.details-container {
    padding: 20px;
}

.details-container h2 {
    color: #333;
    border-bottom: 2px solid #42b983;
    padding-bottom: 10px;
    margin-top: 0;
}

.detail-item {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.detail-item strong {
    display: inline-block;
    width: 60px;
    color: #42b983;
}

.detail-item span {
    margin-left: 10px;
}
</style>